<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>paddle web demo</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <style>
        body {
            margin: 0 auto;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        #rect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            transform-origin: 0 0;
            /* transition: transform .1s linear; */
        }
        .wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        video {
            width: 100%;
        }
        .point {
            position: absolute;
            width: 5px;
            height: 5px;
        }
        #camera-btn {
            display: none;
        }
        #videoSelect::before {
            content: "请选择设备摄像头：";
        }
        #video-tool {
            display: flex;
            justify-content: space-around;
        }
        #isLoading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .5);
        }
        #isLoading .loading-text {
            color: #fff;
            font-size: 24px;
        }
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
        }
        .hidden {
            display: none;
        }
        .show {
            display: block;
        }
        .flex {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -moz-box;
            display: -moz-flex;
            display: flex;
        }
        .flex-space-around {
            -webkit-box-pack: justify;
               -moz-box-pack: justify;
                -ms-box-pack: justify;
            -webkit-justify-content: space-around;
               -moz-justify-content: space-around;
                    justify-content: space-around;
        }
        </style>
    </head>
    <body>
        <div class="wrapper center">
            <img id="image" src="https://m.baidu.com/se/static/img/iphone/logo.png" width="256">
            <video id="video"></video>
            <div id="rect"></div>
            <div id="tool">
                <input type="file" id="uploadImg">
                <div id="video-tool" class="flex">
                    <div>设备摄像头:<select id="videoSelect"></select></div>
                    <button id="start" type="btn" disabled>模型loading中</button>
                    <button id="end" type="btn" disabled>停止测试</button>
                </div>
            </div>
            <div id="txt">...</div>
        </div>

        <div id="isLoading">
            <p class="loading-text center">loading中……</p>
        </div>

        <!-- <div style="position:relative;display:inline-block;;">
            <canvas id="canvas-square" style="display:block;border: 1px solid black;"></canvas>
            <div id="rect2" style="position:absolute;"></div>
            <div id="point1" class="point" style="background:#ff0000;"></div>
            <div id="point2" class="point" style="background:#00ff00;"></div>
            <div id="point3" class="point" style="background:#0000ff;"></div>
        </div> -->
        <!-- <canvas id="canvas-warpAffine" style="display:inline-block;"></canvas> -->

        <script src="index.es6"></script>
    </body>
</html>